<template>
  <div class="box">
    <split-pane :min-percent='minPercent' :max-percent='maxPercent' :default-percent='20' split="vertical">
      <template slot="paneL">
        <page-nav :nav-tree="envTree"/>
      </template>
      <template slot="paneR">
        <page-tags/>
        <transition name="el-fade-in-linear" mode="out-in">
          <keep-alive :include="$store.getters.includePageNames">
            <router-view :key="$route.fullPath"/>
          </keep-alive>
        </transition>
      </template>
    </split-pane>
  </div>
</template>

<script>
  import SplitPane from 'vue-splitpane';
  import { mapState, mapActions } from 'vuex';
  import pageTags from './common/tags.vue';
  import pageNav from './common/nav.vue';

  export default {
    components: {
      SplitPane,
      pageNav,
      pageTags
    },
    computed: {
      ...mapState({
        envTree: (state) => state.app.envTree
      }),
    },
    data() {
      return {
        minPercent: 5,
        maxPercent: 30
      };
    },
    methods: {
      ...mapActions(['getEnvTree']),
    },
  };
</script>

<style lang="scss" scoped>
  .box {
    width: 100%;
    position: fixed;
    top: 0;
  }

  .el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    height: calc(100vh - 98px);
    padding: 0;
    position: relative;
  }

  .side-bar {
    height: calc(100vh)!important;
    width: 100%;
  }


</style>

<style lang="scss">
  .splitter-pane-resizer{
    height: calc(100vh)!important;
  }
</style>
